<template>
  <view class="container">
    <!-- 页头搜索 -->
    <view class="search-bar">
      <input type="text" class="search-input" placeholder="搜索商品" @confirm="onSearch" />
      <view class="search-icon" @click="onSearch"></view>
	  <view class="search-icon" @click="onSearch"></view>
	  
    </view>
    
    <!-- Swiper轮播区 -->
    <swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" duration="500">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image :src="item.imgUrl" class="slide-image" @click="onSwiperClick(item)"></image>
      </swiper-item>
    </swiper>
    
    <!-- 金刚区 -->
    <view class="grid-container">
      <view class="grid-item" v-for="(item, index) in gridList" :key="index" @click="onGridClick(item)">
        <image :src="item.imgUrl" class="grid-image"></image>
        <text class="grid-text">{{ item.text }}</text>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <view class="product-item" v-for="(product, index) in productList" :key="index" @click="onProductClick(product)">
        <image :src="product.imgUrl" class="product-image"></image>
        <text class="product-name">{{ product.name }}</text>
        <text class="product-price">￥{{ product.price }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/util/request.js';

export default {
  data() {
    return {
      swiperList: [], // 轮播图列表
      gridList: [], // 金刚区列表
      productList: [] // 商品列表
    };
  },
  methods: {
    // 搜索商品
    onSearch() {
      // 调用搜索接口，此处为模拟数据，实际应替换为接口调用
      console.log('搜索商品');
    },
    // 轮播图点击事件
    onSwiperClick(item) {
      // 处理轮播图点击事件，如跳转到详情页，此处为模拟数据
	  
	  
      console.log('轮播图点击', item);
    },
    // 金刚区点击事件
    onGridClick(item) {
      // 处理金刚区点击事件，如跳转到分类页，此处为模拟数据
      console.log('金刚区点击', item);
    },
    // 商品点击事件
    onProductClick(product) {
      // 处理商品点击事件，如跳转到商品详情页，此处为模拟数据
      console.log('商品点击', product);
	  uni.navigateTo({
	    //url: 'pages/product/productDetail?id='${product.product_id} // 跳转到对应路径的页面
		url:`/pages/product/productDetail?id=${product.id}`
	  });
    },
    // 加载数据
    loadData() {
	  this.fetchswiperData();
	  this.fetchgridData();
	  this.fetchhotProductData();
    },
	
	async fetchswiperData() {
	  try {
		const response = await request({
		  url: '/carousel',
		  method: 'get'
		});
		if (response.data && Array.isArray(response.data)) {
		  console.log(response.data);
		
		  response.data.forEach(val => {
			let temp = {'id': val.id, 'imgUrl': '/static/' + val.image_url}
			this.swiperList.push(temp)
	
		  });
		} else {
		  console.error('Invalid response data:', response.data);
		}
	  } catch (error) {
		console.error('Request failed:', error);
		// 可以在这里添加更多的错误处理逻辑
	  }
	},
	async fetchgridData() {
	  try {
		const response = await request({
		  url: '/category',
		  method: 'get'
		});
		if (response.data && Array.isArray(response.data)) {
		  console.log(response.data);
		  response.data.forEach(val => {
			console.log(val);
			  this.gridList.push({ id: val.id, imgUrl: '/static/c5.png', text: val.category_name, path: val.path },)

		  });
		} else {
		  console.error('Invalid response data:', response.data);
		}
	  } catch (error) {
		console.error('Request failed:', error);
		// 可以在这里添加更多的错误处理逻辑123
	  }
	},
	
	async fetchhotProductData() {
	  try {
		const response = await request({
		  url: '/hotProduct',
		  method: 'get'
		});
		if (response.data && Array.isArray(response.data)) {
		  console.log(response.data);
		
		  response.data.forEach(val => {
			  console.log(val);
			  this.productList.push({id: val.product_id, imgUrl: '/static/'+val.product.image_url, name: val.product.name, price: val.product.price})
	
	
		  });
		} else {
		  console.error('Invalid response data:', response.data);
		}
	  } catch (error) {
		console.error('Request failed:', error);
		// 可以在这里添加更多的错误处理逻辑
	  }
	},
  },
  onLoad() {
    this.loadData(); // 页面加载时调用加载数据方法
  }
};
</script>

<style>
/* 全局样式 */
.container {
  padding: 10px;
  box-sizing: border-box;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-input {
  flex: 1;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 5px 0 0 5px;
  padding-left: 10px;
  font-size: 16px;
}

.search-icon {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  margin-left: 0;
  border-radius: 0 5px 5px 0;
  background-image: url('/static/search-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

/* Swiper轮播区样式 */
.swiper-container {
  width: 100%;
  height: 200px;
  margin-top: 10px;
}

.slide-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* 金刚区样式 */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.grid-item {
  width: calc(33.33% - 10px);
  margin: 5px;
  padding: 10px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.grid-image {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.grid-text {
  font-size: 14px;
  color: #333;
}

/* 商品列表样式 */
.product-list {
  margin-top: 20px;
}

.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-image {
  width: 300px;
  height: 200px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.product-price {
  font-size: 14px;
  color: #666;
}
</style>
